<template>
  <div class="wap-container enMyOrders" id="container">
    <!--<section class="nav bgfff">-->
      <!--<ul class="">-->
        <!--<li v-bind:class="{markBlue: Gparam.bar===1}" @click="jumpBar(1)">待接单</li>-->
        <!--<li v-bind:class="{markBlue: Gparam.bar===2}" @click="jumpBar(2)">处理中<i class="markNew" v-if="Gparam.chuliNew > 0">{{Gparam.chuliNew}}</i></li>-->
        <!--<li v-bind:class="{markBlue: Gparam.bar===3}" @click="jumpBar(3)">已完成<i class="markNew" v-if="Gparam.wanchengNew > 0">{{Gparam.wanchengNew}}</i></li>-->
      <!--</ul>-->
    <!--</section>-->
    <div style="height: 1px"></div>
    <tab active-color="#43A2FE" v-model="currentIndex" class="nav">
      <tab-item v-for="(item, index) in list" :key="index" :selected="index===currentIndex" @on-item-click="jumpBar(index)">
        <span>{{item.text}}</span>
        <badge :text="item.num" v-if="item.num>0"></badge>
      </tab-item>
    </tab>
      <ul class="UL ul1" v-if="currentIndex === 0">
        <li v-for="item in jiedanRows">
          <div class="creatTime">{{item.createdTime}}</div>
          <div class="order-info" @click="jumpPage(item.systemStatus,item.id)">
            <ul class="pl20 pb15">
              <li class="rowflex">
                <div class="info-item c666 ">工单编号</div>
                <div>{{item.code}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666 letterSpacing">联系人</div>
                <div>{{item.linkMan}}</div>
              </li>
              <li class="rowflex">
                <div class="info-item c666">联系电话</div>
                <div>{{item.linkPhone}}</div>
              </li>
              <div  class="i"></div>
            </ul>
          </div>
        </li>
      </ul>
    <ul class="UL" v-if="currentIndex === 1">
      <li v-for="item in chuliRows">
        <div class="creatTime">{{item.createdTime}}</div>
        <div class="order-info" @click="jumpPage(item.systemStatus,item.id, item.workOrderType.serviceType)">
          <ul class="pl20 pb15">
            <li class="rowflex">
              <div class="info-item c666 ">工单编号</div>
              <div>{{item.code}}</div>
            </li>
            <li class="rowflex" v-if="item.workOrderType.serviceType == 'OUT'">
              <div class="info-item c666 letterSpacing">联系人</div>
              <div>{{item.linkMan}}</div>
            </li>
            <li class="rowflex" v-if="item.workOrderType.serviceType == 'IN'">
              <div class="info-item c666 letterSpacing">派单人</div>
              <div>{{item.backgrounder.loginName}}</div>
            </li>
            <li class="rowflex">
              <div class="info-item c666">联系电话</div>
              <div v-if="item.workOrderType.serviceType == 'OUT'">{{item.linkPhone}}</div>
              <div v-if="item.workOrderType.serviceType == 'IN'">{{item.backgrounder.mobile}}</div>
            </li>
            <li v-if="item.errorDescription && item.workOrderType.serviceType == 'OUT'" class="rowflex">
              <div class="info-item c666 ">报修内容</div>
              <div class="repair-content">{{item.errorDescription}}</div>
            </li>
            <li class="rowflex" v-if="item.workOrderType.serviceType == 'OUT'">
              <div class="info-item c666">工单状态</div>
              <div v-if="item.systemStatus === 0">待派发</div>
              <div v-if="item.systemStatus === 1">待接单</div>
              <div v-if="item.systemStatus === 2">预约中</div>
              <div v-if="item.systemStatus === 3">待出发</div>
              <div v-if="item.systemStatus === 4">行程中</div>
              <div v-if="item.systemStatus === 5">处理中</div>
              <div v-if="item.systemStatus === 6">质检中</div>
              <div v-if="item.systemStatus === 7">处理完成</div>
              <div v-if="item.systemStatus === 8">报销中</div>
              <div v-if="item.systemStatus === 9">待归档</div>
              <div v-if="item.systemStatus === 10">归档</div>
              <div v-if="item.systemStatus === 11">删除</div>
            </li>
            <div v-if="item.systemStatus === 1" class="status">接单</div>
            <div v-if="item.systemStatus < 6 && item.systemStatus >1" class="status">处理</div>
            <!--<div v-if="item.systemStatus === 7" class="status">完成</div>-->
          </ul>
        </div>
      </li>
    </ul>
    <ul class="UL" v-if="currentIndex === 2">
      <li v-for="item in wanchengRows">
        <div class="creatTime">{{item.createdTime}}</div>
        <div class="order-info" @click="jumpPage(item.systemStatus,item.id, item.workOrderType.serviceType)">
          <ul class="pl20 pb15">
            <li class="rowflex">
              <div class="info-item c666 ">工单编号</div>
              <div>{{item.code}}</div>
            </li>
            <li class="rowflex" v-if="item.workOrderType.serviceType == 'OUT'">
              <div class="info-item c666 letterSpacing">联系人</div>
              <div>{{item.linkMan}}</div>
            </li>
            <li class="rowflex" v-if="item.workOrderType.serviceType == 'IN'">
              <div class="info-item c666 letterSpacing">派单人</div>
              <div>{{item.backgrounder.loginName}}</div>
            </li>
            <li class="rowflex">
              <div class="info-item c666">联系电话</div>
              <div v-if="item.workOrderType.serviceType == 'OUT'">{{item.linkPhone}}</div>
              <div v-if="item.workOrderType.serviceType == 'IN'">{{item.backgrounder.mobile}}</div>
            </li>
            <li class="rowflex">
              <div class="info-item c666">工单状态</div>
              <div v-if="item.systemStatus === 11"><span class="red">已取消</span><span style="font-size: 0.1rem;">（不可报销）</span></div>
              <div v-else-if="(item.systemStatus === 7 || item.systemStatus === 8 || item.systemStatus === 9) && item.finishedType == 1">终止完成</div>
              <div v-else>已完成</div>
            </li>
          </ul>
        </div>
      </li>
    </ul>

    <div class="addOrder" @click="addOrder()"><span>工单申请</span></div>

    <div v-transfer-dom>
      <popup v-model="addPopup" style="background-color: #fff">
        <popup-header
          left-text="取消"
          title="选择申请工单类型"
          :show-bottom-border="false"
          @on-click-left="showPopup"
          @on-click-right="showPopup"></popup-header>
        <group gutter="0">
          <radio :options="['内部工单']" @click.native="goApplyOrder('IN')"></radio>
          <radio :options="['外部工单']" @click.native="goApplyOrder('OUT')"></radio>
        </group>
      </popup>
    </div>
  </div>
</template>

<script>
    import {Tab, TabItem, Swiper, SwiperItem, Group, Cell, CellBox, CellFormPreview, Badge, Confirm,TransferDom, Radio,PopupHeader, Popup} from 'vux'
    export default {
      name: "EnMyOrders",
      directives: {
        TransferDom
      },
      components: {
        Tab, TabItem, Swiper, SwiperItem, Group, Cell, CellBox, CellFormPreview, Badge, Confirm, Radio,PopupHeader, Popup,
      },
      data(){
        return {
          list: [
            {
              text:'待受理',
              num: '0',
            },
            {
              text:'处理中',
              num: '0',
            },
            {
              text:'已完成',
              num: '0',
            }
          ],
          currentIndex: 0,
          Gparam: {
            bar: 1,
            jiedanNew: 0,
            chuliNew: 0,
            wanchengNew: 0,
          },
          userInfo: {},
          rows: [],
          allRows: [],
          jiedanRows: [],
          chuliRows: [],
          wanchengRows: [],
          addPopup: false,
        }
      },
      methods: {
        jumpBar: function (num){
          if (num === 0){
            this.$http.get('/work/api/workorder/?engineerId='+this.userInfo.id+'&systemStatus=1&noPage=true').then(res=>{
              this.jiedanRows = res.data.data
            })
          }
          if (num === 1){
            this.$http.get('/work/api/workorder/?engineerId='+this.userInfo.id+'&systemStatus=2&systemStatus=3&systemStatus=4&systemStatus=5&systemStatus=6&noPage=true').then(res=>{
              this.chuliRows = res.data.data
            })
          }
          if (num === 2){
            this.$http.get('/work/api/workorder/?engineerId='+this.userInfo.id+'&systemStatus=7&systemStatus=8&systemStatus=9&systemStatus=11&noPage=true').then(res=>{
              this.wanchengRows = res.data.data
            })
          }
          // this.Gparam.bar = num
          // if(num == 1){
          //   this.Gparam.jiedanNew = 0
          //   this.rows = this.jiedanRows
          // } else if(num==2){
          //   this.Gparam.chuliNew = 0
          //   this.rows = this.chuliRows
          // } else if(num==3){
          //   this.Gparam.fukuanNew = 0
          //   this.rows = this.wanchengRows
          // }
        },
        jumpPage: function (status,id,serviceType) {
          if (status == 11) {
            return false
          }
          if (status === 1){ //待接单
            this.$router.push({path: '/engineer/enReceiveOrder',query: {orderId: id}})
          } else if(status < 6 && status > 1){ // 待处理
            if (serviceType == 'IN'){
              this.$router.push({path: '/engineer/enWorkingInOrder',query: {orderId: id}})
            } else if (serviceType == 'OUT') {
              this.$router.push({path: '/engineer/enWorkingOrder',query: {orderId: id}})
            }
          } else if(status > 6){ // 完成
            // this.$router.push({path: '/user/orderAppraiseHome',query: {orderId: id}})
            // this.$router.push("/user/orderAppraiseHome")
            if (serviceType == 'IN'){
              this.$router.push({path: '/engineer/enWorkedInOrder',query: {orderId: id}})
            } else if (serviceType == 'OUT'){
              this.$router.push({path: '/engineer/enWorkingOrder',query: {orderId: id}})
            }
          }
        },
        addOrder: function () {
          this.showPopup()
        },
        showPopup: function () {
          this.addPopup = !this.addPopup
        },
        goApplyOrder: function (param) {
          if (param == 'IN'){
            this.$router.push({path: '/engineer/enApplyInOrder'})
          } else if (param == 'OUT'){
            this.$router.push({path: '/engineer/enApplyOutOrder'})
          }
        }
      },
      mounted(){
        this.$getUserInfo().then(user=>{
          this.userInfo = user
          let data = {
            search: {
              fields: this.userInfo.id
            }
          }
          console.log(data)
          this.$http.get('/work/api/workorder/count/engineer').then(res=> {
            let data = res.data.data
            this.list[0].num = ''+data.receiveCount
            this.list[1].num = ''+data.inhandCount
            this.list[2].num = ''+data.finishedCount
          })
          this.$http.get('/work/api/workorder/?engineerId='+this.userInfo.id+'&systemStatus=1&noPage=true').then(res=>{
            this.jiedanRows = res.data.data
          })
        })
      },
    }
</script>

<style lang="less">
  .enMyOrders {
    font-size: 0.13rem;
    .nav {
      height: 0.4rem;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 2;
    }

    .nav ul {
      display: flex;
      justify-content: space-around;
      line-height: 0.4rem;
      font-size: 0.16rem;
      text-align: center;
      color: #666;
      li {
        width: 0.6rem;
      }
    }
    .ul1 .order-info{
      background-image: url("~assets/images2/icon_zuojian@2x.png");
      background-repeat: no-repeat;
      background-position: 3.5rem 0.2rem;
      background-size: 0.08rem 0.15rem;
    }
    .UL{
      margin-top: 0.44rem;
      margin-bottom: 0.2rem;
    }
    .vux-badge-single{
      margin-top: -0.02rem;
    }
    .markNew {
      display: block;
      width: 0.12rem;
      height: 0.12rem;
      background-color: #fa4a38;
      font-size: 0.08rem;
      border-radius: 0.12rem;
      line-height: 1;
      margin-top: -0.04rem;
      margin-left: 0.55rem;
      position: absolute;
      top: 0.1rem;
      color: #fff;
    }

    .order-info {
      font-size: 0.15rem;
      background-color: #fff;
      padding-top: 0.05rem;
      margin-top: 0.1rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      position: relative;
    }

    .order-info ul li {
      margin-top: 0.15rem;
      line-height: 0.15rem;
    }

    .repair-content {
      width: 2.5rem;
      line-height: normal;
      margin-top: -0.03rem;
    }

    .order-info .info-item {
      width: 0.75rem;
    }

    .order-info{
      .status {
        font-size: 0.1rem;
        width: 0.6rem;
        height: 0.2rem;
        line-height: 0.2rem;
        border-radius: 0.2rem;
        text-align: center;
        top: 0.2rem;
        right: 0.1rem;
        background-color: #fa4a38;
        color: #fff;
        position: absolute;
      }
      .i{

      }
    }

    ul li .creatTime {
      background-color: #d3d3d3;
      display: inline-block;
      padding: 0 0.08rem;
      border-radius: 0.04rem;
      font-size: 0.1rem;
      color: #fff;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 0.2rem;
    }
    .bottom{
      margin-top: 0.4rem;
    }
    .addOrder{
      width: 0.5rem;
      height: 0.7rem;
      position: fixed;
      z-index: 2;
      bottom: 0.3rem;
      left: 50%;
      background: url("~assets/images4/icon-tianjiabaoxiao@2x.png") no-repeat;
      background-size: 100%;
      transform: translateX(-50%);
      span{
        display: block;
        font-size: 0.12rem;
        color: #4691ee;
        margin-top: 0.5rem;
      }
    }
  }
</style>
